<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图对焦效果</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <header>
            <div>
                <img src="./images/1.png" />
            </div>
            <div>
                <img src="./images/2.png" />
            </div>
            <div>
                <img src="./images/3.png" />
            </div>
            <div>
                <img src="./images/4.png" />
            </div>
            <div>
                <img src="./images/5.png" />
            </div>
            <div>
                <img src="./images/6.png" />
            </div>
        </header>
        <script>
            const images = document.querySelectorAll("header > div > img");

            document
                .querySelector("header")
                .addEventListener("mousemove", (e) => {
                    let percentage = e.clientX / window.outerWidth;
                    let offset = 10 * percentage;
                    let blur = 20;

                    for (let [index, image] of images.entries()) {
                        offset *= 1.3;

                        let blurValue =
                            Math.pow(index / images.length - percentage, 2) *
                            blur;

                        image.style.setProperty("--offset", `${offset}px`);
                        image.style.setProperty("--blur", `${blurValue}px`);
                    }
                });
        </script>
    </body>
</html>
